import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import Left from '../components/item-left'
import Right from '../components/item-right'
import LeftTop from '../components/left-top'
import LeftMiddle from '../components/left-middle'
import LeftBottom from '../components/left-bottom'
import RightTop from '../components/right-top'
import RightMiddle from '../components/right-middle'
import RightTop2 from '../components/Right-top2'
import RightBottom from '../components/right-bottom'
import Gis from './gis';
import './style.less'
import Weather from '../../water-prevention/components/weather';
import { FullScreenContainer } from '$components'
import { useFsRequest } from '$utils';

function homePage(props) {
   const { dispatch, actions } = props;
   const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
   const cardHeight = document.body.clientHeight * 0.896 * 0.32
   const cardContentHeight = cardHeight - 42 - 13
   const [tab, setTab] = useState('overview')
   const [emengencyTab, setEmengencyTab] = useState('xfyjwz');
   const [alarmInfo, setAlarmInfo] = useState({})
   const [routes, setRoutes] = useState({})
   const [longitudeLatitude, setLongitudeLatitude] = useState({})

   const [fireDevice, setFireDevice] = useState([])
   const [fireTrend, setFireTrend] = useState([])

   const { data: emergencyList = {} } = useFsRequest({ url: 'water/emergency' });
   const endEvent = () => {
      dispatch(actions.firecontrol.modifyFireAlarm(
         alarmInfo?.alarmInfo?.id, { state: 2 }
      )).then(res => {
         setTab('overview')
      })
   }

   useEffect(() => {
      getFireData();
   }, [])

   const getFireData = () => {
      dispatch(actions.firecontrol?.getFireDevice()).then(res => {
         if (res?.payload?.data?.length) {
            const filterData = res.payload.data.filter(d => d.device_count)
            setFireDevice(filterData)
         }
      })
      dispatch(actions.firecontrol?.getFireTrend()).then(res => {
         if (res?.payload?.data) {
            setFireTrend(res.payload.data)
         }
      })
   }

   return <>
      <FullScreenContainer>
         <div className='homepage'>
            <div className='_title'>
               <div className='_title_text'>
                  <span>消防一键护航</span>
               </div>
               <Weather />
               <div onClick={() => { dispatch(push('/homepage')) }} className='_exit' >返回平台</div>
            </div>
            <div className='homepage-left homepage-left-left'>
               <div div className="list">
                  {tab == 'overview' ?
                     <>
                        <div className='child' style={childStyle}>
                           <LeftTop emergencyList={emergencyList} />
                        </div>
                        <div className='child' style={childStyle}>
                           <LeftMiddle fireDevice={fireDevice} />
                        </div>
                        <div className='child' style={childStyle}>
                           <LeftBottom cardContentHeight={cardContentHeight} fireTrend={fireTrend} />
                        </div>
                     </>
                     :
                     <div className='child' style={{ height: '100%' }} >
                        <Left
                           routes={routes}
                           info={alarmInfo}
                           endEvent={() => { endEvent() }}
                           cardContentHeight={document.body.clientHeight * 0.896} />
                     </div>
                  }
               </div>
            </div>
            <div className='homepage-center'>
               <Gis
                  emergencyList={emergencyList}
                  setLongitudeLatitude={setLongitudeLatitude}
                  dispatch={dispatch}
                  actions={actions}
                  propTab={tab}
                  alarmOk={(info) => {
                     setTab('item')
                     setAlarmInfo(info);
                  }}
                  changeEmengencyTab={(e) => {
                     setEmengencyTab(e)
                  }}
                  routeCallback={(e) => {
                     setRoutes(e);
                  }}
               />
            </div>
            <div className='homepage-left homepage-left-right'>
               {tab == 'overview' ? <div className="list">
                  {/* <div className='child-right' style={childStyle}>
                     <RightTop />
                  </div>
                  <div className='child-right' style={childStyle}>
                     <RightMiddle cardContentHeight={cardContentHeight} />
                  </div>  */}
                  <div className='child-right' style={{ height: 'calc(64% + 17px)', color: '#fff', marginBottom: 17 }}>
                     <RightTop2 longitudeLatitude={longitudeLatitude} />
                  </div>
                  <div className='child-right' style={childStyle}>
                     <RightBottom />
                  </div>
               </div> :
                  <div className='child' style={{ height: '100%' }} >
                     <Right emergencyList={emergencyList} emengencyTab={emengencyTab} cardContentHeight={document.body.clientHeight * 0.896} />
                  </div>
               }
            </div>

         </div >
      </FullScreenContainer>

   </>


}

function mapStateToProps(state) {
   const {
      auth, global
   } = state;
   return {
      clientHeight: global.clientHeight,
      actions: global.actions,

   };
}

export default connect(mapStateToProps)(homePage);


